<template>
  <div class="upload">
    <a-upload
      ref="uploadRefs"
      multiple
      :action="actionURL"
      :limit="limit"
      :show-file-list="false"
      :headers="headers"
      :data="data"
      :accept="getAccept"
      @progress="handleProgress"
      @success="handleSuccess"
      @exceed-limit="handleExceed"
      @error="handleError"
    >
      <slot></slot>
    </a-upload>
    <a-modal
      v-if="showProgress"
      v-model:visible="visible"
      title="上传进度"
      :close-on-click-modal="false"
      width="500px"
      :modal="false"
      @close="handleClose"
    >
      <div class="file-list p-4">
        <template v-for="(item, index) in fileList" :key="index">
          <div class="mb-5">
            <div>{{ item.name }}</div>
            <div class="flex-1">
              <a-progress :percentage="parseInt(item.percentage)"></a-progress>
            </div>
          </div>
        </template>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, shallowRef, toRaw, defineEmits, defineProps} from 'vue'
// import useUserStore from '@/store/modules/user'
import {Message} from "@arco-design/web-vue";
import { getToken } from "@/utils/auth";

const emits = defineEmits(['change', 'error', 'success'])

const props = defineProps({
  // 上传文件类型
  type: {
    type: String,
    default: 'image'
  },
  // 是否支持多选
  multiple: {
    type: Boolean,
    default: true
  },
  // 多选时最多选择几条
  limit: {
    type: Number,
    default: 10
  },
  // 上传时的额外参数
  data: {
    type: Object,
    default: () => ({})
  },
  // 是否显示上传进度
  showProgress: {
    type: Boolean,
    default: true
  }
})

// const userStore = useUserStore()
const uploadRefs = shallowRef()

const BASE_URL = import.meta.env.VITE_API_BASE_URL
const actionURL = ref(`${BASE_URL}/admin/upload/multiple`)

// const headers = computed(() => ({
//   token: userStore.token
// }))

const headers = ref({ Authorization: `Bearer ${getToken()}` });

const visible = ref(true)
const fileList = ref<any[]>([])

const handleProgress = (fileItem: any, event: any) => {
  console.log(fileItem, event)
  visible.value = true
  // fileList.value = toRaw(fileLists)
}

const handleSuccess = (fileItem) => {
  console.log(fileItem)
  // const allSuccess = fileLists.every((item) => item.status === 'success')
  // if (allSuccess) {
  //   uploadRefs.value?.clearFiles()
  //   visible.value = false
  // }
  // emits('change', file)
  // if (response.code === 200) {
  //   emits('success', response)
  // }
}
const handleError = (event: any, file: any) => {
  Message.error(`${file.name}文件上传失败`)
  uploadRefs.value?.abort(file)
  visible.value = false
  emits('change', file)
  emits('error', file)
}
const handleExceed = () => {
  Message.error(`超出上传上限${props.limit}，请重新上传`)
}
const handleClose = () => {
  // uploadRefs.value?.clearFiles()
  visible.value = false
}

const getAccept = computed(() => {
  switch (props.type) {
    case 'image':
      return '.jpg,.png,.gif,.jpeg'
    case 'video':
      return '.wmv,.avi,.mpg,.mpeg,.3gp,.mov,.mp4,.flv,.rmvb,.mkv'
    default:
      return '*'
  }
})

</script>

<style scoped lang="less"></style>
